{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<style id ='style-height'>
    .layui-table td{
        height:50px;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
        word-wrap: normal | break-word ;
    }
    td .layui-form-select{
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
    }

</style>
<br>
<form class="layui-form" action="" id="cross_srh">
    <div class="proxy_srh">
        <div class="layui-inline">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <label class="layui-form-label">项目*：</label>
                    <div class="layui-input-inline">
                        <select class="layui-select" name="project_name" id="project_name" lay-verify="" lay-search
                                lay-filter="project_name">
                            <option value="">请选择</option>
                            {% for d in projectAll %}
                            <option value="{{d.id}}">{{d.project_name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline">
                    <label class="layui-form-label">用例版本*：</label>
                    <div class="layui-input-inline" id="case_plan_div">
                        <select class="layui-select" name="case_plan" id="case_plan" lay-verify="" lay-search
                                lay-filter="case_plan">
                            <option value=''>＋新增用例版本</option>
                        </select>
                    </div>
                </div>

                <div class="layui-input-inline" style="left:20px">
                    <div class="layui-input-inline" >
                        <a href="javascript:;" style="color:#01AAED" id="downLoad"> 下载模板</a>
                    </div>
                </div>

                <div class="layui-input-inline" style="left:110px;" id="upload_fun">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn " id="test8">选择文件</button>
                        <button type="button" class="layui-btn layui-btn-danger" id="test9">导入用例</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<hr class="layui-bg-gray">

<button class="layui-btn  layui-btn-sm layui-btn-danger" id="add" type="button">
    <i class="layui-icon"></i> 保存以下内容
</button>
<div class="layui-input-inline" style="">
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="cellHeigh" id="cellHeigh" value="50"
               style="width:50px;height:30px">
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-sm" id="setHeight" lay-submit lay-filter="setHeight">列高</button>
    </div>
    <div class="layui-inline" >
        <span id="countAll" style="color:red"></span>
    </div>
</div>
<table class="layui-hide" id="iptCase" lay-filter="iptCase"></table>
<script type="text/html" id="filemange_v1">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delNode"><i class="layui-icon">
        &#xe640;</i></button>
</script>
<script>
    layui.use(['table','code','laypage','upload'], function(){
          var table = layui.table
          ,form = layui.form;
          var $= layui.jquery;
          var upload = layui.upload;
          var ImportCaseAll = new Array();

          upload.render({
            elem: '#test8'
            ,url: '/upload/xls' //改成您自己的上传接口
            ,auto: false
            ,accept: 'file'
            ,acceptMime:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ,exts:'xlsx'
            ,bindAction: '#test9'
            ,before: function(obj){

            }
            ,done: function(res){
                if(res.data){
                    ImportCaseAll = res.data;
                    table.reload('iptCase',{data:ImportCaseAll});
                }else{
                    layer.msg("上传的excel中缺少模板的字段");
                }

            }
          });
          $('#setHeight').on('click',function(){

                height = $('#cellHeigh').val();

                strStyle = '.layui-table td{height:'+height+'px;overflow:visible;text-overflow:inherit;white-space:normal;}';
                $("#style-height").html(strStyle);
          });

          $('#add').on('click',function(){
                //提交到服务端
                if($('#case_plan option:selected').text() == "＋新增用例版本"){layer.msg("请先选择一个用例版本");return false};

                layer.confirm('确认提交?', function(index){
                    project_id = $('#project_name option:selected').val();
                    case_plan = $('#case_plan option:selected').text();
                    user_id = layui.data('test').UserInfo.userId;
                    if(table.cache.iptCase.length == 0){layer.msg("没有提交的行");return false;};

                    data= {"project_id":project_id,"userId":user_id,"case_plan":case_plan,"data":table.cache.iptCase}

                    //发送导入的请求
                    $.ajax({
                                     //发出请求
                                    type:"POST",
                                    url:"/basecase/case/import/saveAll?",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    async: false,
                                    data:JSON.stringify(data),
                                    success: function(result){
                                        if(result.id.length){
                                            layer.msg("保存成功!");
                                            table.reload('iptCase',{data:new Array()});
                                        }else{
                                            layer.msg("没有提交任何内容!");
                                        }
                                        layer.close(index);
                                   }
                    });


                });

          });

          $('#downLoad').on('click',function(){

                url = "/download/templates.xlsx";
                window.location.href = url;
          });

          table.on('row(iptCase)', function(obj){
            obj.tr.css("background","greenyellow");
          });

          table.on('edit(iptCase)', function(obj){
              obj.tr.css("background","greenyellow");
          });
          table.on('tool(iptCase)', function(obj){
                if (obj.event ==='delNode'){
                    obj.del();
                }
          });



          var  options = {
                elem:'#iptCase',
                skin:"line",
                height: 'full-230',
                toolbar: true,
                limit:5000,
                id:"iptCase",
                cols:[[
                       {type: 'numbers',title:'No.'}
                      ,{field: 'case_require_no', title: '需求编号',sort:true,edit:'text'}
                      ,{field: 'case_main_mod', title: '主模块',width:100,edit:'text',sort:true}
                      ,{field: 'case_second_mod', title: '子模块',edit:'text',sort:true}
                      ,{field: 'case_fun', title: '*设计*',width:120,sort:true, templet: function (d) {
                            return '<select name="case_fun" lay-filter="case_fun" data-value="'+d.case_fun+'">'+
                            '    <option value="">选择</option>'+
                            '    <option value="0">正向用例</option>'+
                            '    <option value="1">异常用例</option>'+
                            '    <option value="2">场景用例</option>'+
                            '    <option value="3">其它方法</option>'+
                            '</select>';

                       }}
                      ,{field: 'case_pri', title: '级别',width:90,sort:true, templet: function (d) {
                            return '<select name="case_pri" lay-filter="case_pri" data-value="'+d.case_pri+'">'+
                            '    <option value="">选择</option>'+
                            '    <option value="高">高</option>'+
                            '    <option value="中">中</option>'+
                            '    <option value="低">低</option>'+
                            '</select>';

                       }}
                      ,{field: 'case_pre', title: '前提',edit:'text',sort:true}
                      ,{field: 'case_title', title: '*标题*',edit:'text',sort:true}
                      ,{field: 'case_step', title: '步骤',edit:'text',sort:true}
                      ,{field: 'case_expect', title: '期待结果',edit:'text',sort:true}
                      ,{field: 'case_note', title: '备注',edit:'text',sort:true,templet: function(d){
                            return d.case_note;
                      }}
                      ,{field: 'autofun', title: '脚本',edit:'text',sort:true}
                      ,{fixed: 'right', title:'', toolbar: '#filemange_v1',width:80}
                ]],
                data:ImportCaseAll,
                done:function(res,cur,count){
                    var tableElem = this.elem.next('.layui-form.layui-border-box.layui-table-view');
                    count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                    layui.each(tableElem.find('select'), function (index, item) {
                        var elem = $(item);
                        elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                    });
                    form.render();

                }
          };
          var tableIns = table.render(options);

          form.on('select(case_fun)', function(obj){
                  row = obj.elem.parentNode.parentNode.parentNode.rowIndex;
                  table.cache.iptCase[row].case_fun = obj.value;

                  form.render('select');
          });
          form.on('select(case_pri)', function(obj){
                  row = obj.elem.parentNode.parentNode.parentNode.rowIndex;
                  table.cache.iptCase[row].case_pri = obj.value;
                  form.render('select');
          });

          form.on('select(project_name)', function(obj){
                $.ajax({
                         //发出请求
                        type:"GET",
                        url:"/basecase/casepaln/all?",
                        contentType: 'application/json; charset=utf-8',
                        dataType:"json",
                        data:{"project_id":obj.value},
                        success: function(result){
                            s1 = '<div class="layui-input-inline"> <select class="layui-select" name="case_plan" id="case_plan" lay-verify="" lay-search lay-filter="case_plan"><option value="">＋新增用例版本</option>';
                            e1 = '</select></div>';
                             if(result.data.length>0){

                                str = '';
                                layui.each(result.data,function(k,v){
                                        plan = v.case_plan;
                                        str = str+'<option value="'+plan+'">'+plan+'</option>'
                                });
                                htmlDiv = s1+str+e1;
                                $("#case_plan_div").html(htmlDiv);
                             }else{
                                $("#case_plan_div").html(s1+e1);
                             }
                             form.render();
                       }
                    });
                  form.render('select');
          });

          form.on('select(case_plan)', function(obj){
                if($('#case_plan option:selected').text() == "＋新增用例版本"){
                    if($('#project_name option:selected').val() == "" ){
                        layer.msg("请先选择项目!");
                        return;
                    }
                    //点击的新增计划
                    divRunContent = '<form class="layui-form" action="" id="cross_srhx" lay-filter="cross_srhx">'+
                        '    <div class="layui-inline"><br>'+
                        '        <div class="layui-input-inline">'+
                        '            <label class="layui-form-label">case_plan：</label>'+
                        '            <div class="layui-input-inline">'+
                        '                <input type="text" class="layui-input" required name="new_case_plan"  style="width:212px" id="new_case_plan">'+
                        '            </div>'+
                        '        </div>'+
                        '        <div class="layui-inline">'+
                        '            <button class="layui-btn" type="button" id="saveNewPlan" lay-submit lay-filter="saveNewPlan">保存</button>'+
                        '        </div>'+
                        '    </div>'+
                    '</form>';
                    index = layer.open({
                            type:1,
                            skin: 'demo-class',
                            content:divRunContent,
                            area:['409px','200px'],
                            //offset:  'rb',
                            title: "新增案例版本(保存用例后才会提交)",
                            closeBtn:1,
                            shade: 0,
                            shadeClose:true,
                            success: function(index, layero){
                            }
                     });
                     $('#saveNewPlan').on('click',function(){
                            case_plan = $('#new_case_plan').val();
                            project_id = $('#project_name option:selected').val();
                            if(case_plan == ""){
                                layer.msg("请填写后再保存");
                                return false;
                            }
                            $.ajax({
                                     //发出请求
                                    type:"GET",
                                    url:"/basecase/casePlan/exist?",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType:"json",
                                    async: false,
                                    data:{"project_id":project_id,"case_plan":case_plan},
                                    success: function(result){
                                         if(result.isExist == true){
                                            layer.msg("该名称已经存在，请重新添加");
                                         }else{
                                            layer.msg("添加成功!");
                                            //向下拉框追加值，并选中
                                            plan = case_plan;
                                            $('#case_plan').append('<option value="'+plan+'">'+case_plan+'</option>');
                                            $("#case_plan").find("option[value='"+plan+"']").attr("selected",true);

                                            $('#saveNewPlan').hide();
                                            form.render();
                                         }
                                   }
                            });

                      });

                }else{

                }
                form.render('');
          });
    });

</script>

{% endblock %}